<template>
  <el-dialog
    :title="!dataForm.id ? '通知新增' : '通知修改'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      ref="dataForm"
      :rules="dataRule"
      @keyup.enter.native="dataFormSubmit()"
      label-width="150px"
      class="noticcontent"
    >
      <el-form-item label="通知名称" prop="noticeName">
        <el-input v-model="dataForm.noticeName"></el-input>
      </el-form-item>
      <el-form-item label="通知操作" prop="noticeType">
        <el-select v-model="dataForm.noticeType" placeholder="请选择通知操作" @change="setNotice">
          <el-option
            v-for="(item, index) in steward"
            :key="index"
            :label="item.name"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="通知模版" prop="noticeContext">
        <el-input type="textarea" :autosize="{ minRows: 5}" v-model="dataForm.noticeContext"></el-input>
      </el-form-item>
      <el-form-item label="跳转链接" prop="jumpLink">
        <el-input v-model="dataForm.jumpLink"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="forbidState">
        <el-radio-group v-model="dataForm.forbidState">
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否进行消息推送" prop="terminalPushState">
        <el-radio-group v-model="dataForm.terminalPushState">
          <el-radio label="0">不推送</el-radio>
          <el-radio label="1">推送</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否进行消息推送" prop="iconId">
        <el-radio-group v-model="dataForm.iconId">
          <el-radio v-for="item in iconList" :label="item.id"><img :src="item.iconUrl" style="width: 30px;height: 30px;" alt="">{{item.iconName}}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()">立即创建</el-button>
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      steward: [],
      rember: "0",
      value5: "",
      options: [
        {
          value: "0",
          label: "本人"
        },
        {
          value: "1",
          label: "上级"
        },
        {
          value: "2",
          label: "上上级"
        }
      ],
      visible: false,
      dataForm: {
        id: "",
        noticeName: "",
        noticeType: "",
        noticeContext: "",
        jumpLink: "",
        forbidState: "",
        terminalPushState: "",
        iconId: ""
      },
      iconList: [],
      dataRule: {
        noticeName: [
          { required: true, message: "通知名称不能为空", trigger: "blur" }
        ],
        noticeType: [
          { required: true, message: "通知操作不能为空", trigger: "blur" }
        ],
        noticeContext: [
          { required: true, message: "通知模版不能为空", trigger: "blur" }
        ],
        jumpLink: [
          // { required: true, message: "跳转链接不能为空", trigger: "blur" },
          {
            pattern: /(http|https|yiban):\/\/([\w.]+\/?)\S*/,
            message: "只能输入以http、https、yiban开头的网址",
            trigger: "blur"
          }
        ],
        forbidState: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ],
        terminalPushState: [
          {
            required: true,
            message: "是否进行消息推送不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.initMessageType()
    this.initicon()
  },
  methods: {
    initicon() {
      this.$http({
        url: this.$http.adornUrl(`/user/notice/icon/list`),
        method: "get",
      }).then(({ data }) => {
        this.iconList = data.page.list;
      })
    },
    initMessageType(){
      this.$http({
        url: this.$http.adornUrl(`/user/noticetemplate/getNoticeType`),
        method: "get",
      }).then(({ data }) => {
        this.steward = data
      })
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        console.log(this.dataForm)
        this.changetime = false;
        this.disabled = false;
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/user/noticetemplate/info/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.id = data.noticeTemplate.id;
              this.dataForm.noticeName = data.noticeTemplate.noticeName;
              this.dataForm.forbidState = data.noticeTemplate.forbidState + "";
              this.dataForm.terminalPushState =
                data.noticeTemplate.terminalPushState + "";
              this.dataForm.noticeType = data.noticeTemplate.noticeType;
              this.dataForm.jumpLink = data.noticeTemplate.jumpLink;
              this.dataForm.noticeContext = data.noticeTemplate.noticeContext;
              this.dataForm.iconId = data.noticeTemplate.iconId;
            }
          });
        }
      });
    },
    setNotice() {
      const that = this;
      switch (this.dataForm.noticeType) {
        case 1:
          that.dataForm.noticeContext =
            "亲爱的{name}用户，恭喜您成为益伴会员，即刻起可享受会员专属权益！";
          break;
        case 2:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您有一笔来自于{consumer}的会员成单收益！购买时间为{buytime}，订单号为{orderID}，购买价格为{price}元，您获得的收益为{revenue}元！";
          break;
        case 3:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您有一笔来自于{consumer}的课程成单收益！购买课程为{priceName}，购买时间为{buytime}，订单号为{orderID}，购买价格为{price}元，您获得的收益为{revenue}元！";
          break;
        case 4:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您助力的{partner}的{partnername}心愿已经助力完成！";
          break;
        case 5:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您有一笔来自于{refunder}的课程退款！退款课程为{courseName}，退款时间为{refundTime}，退款订单号为{orderID}，原购买价格为{orderBuyPrice}元，退款价格为{orderRefundPrice}元，您扣除的收益为{spending}元！";
          break;
        case 6:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您于{withdrawTime}申请的提现申请已成功打款，原提现金额为{withdrawPrice}元，扣除税费{taxation}元，实际到账金额{actualAmount}元，请至我的微信零钱查收！";
          break;
        case 7:
          that.dataForm.noticeContext =
            "";
          break;
        case 8:
          that.dataForm.noticeContext =
            "亲爱的{name}用户，恭喜您有了自己的助力团队，快去看一下您的队友都有谁吧～";
          break;
        case 9:
          that.dataForm.noticeContext =
            "";
          break;
        case 10:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您助力的{partner}的{partnername}心愿礼物已由工作人员寄出，戳此查看详情>>";
          break;
        case 11:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您助力的{partner}的{partnername}心愿礼物已送达，快看看TA对你说了什么吧>>";
          break;
        case 12:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您的团队已领取{paternername}的心愿，快去为您的团队筑梦心愿助力吧>>";
          break;
        case 13:
          that.dataForm.noticeContext =
            "恭喜你的笔记入选为精选笔记！笔记内容：确立一个可操作的目标…";
          break;
        case 14:
          that.dataForm.noticeContext =
            "";
          break;
        case 15:
          that.dataForm.noticeContext =
            "亲爱的{name}用户，恭喜您成为经理，您现在有属于自己的助力团队了哦，快去领取一个团队心愿吧～";
          break;
        case 16:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，您有一笔来自于{refunder}的会员退款！退款时间为{refund time}，退款订单号为{refund orderID}，退款价格为{refund price}元，您扣除的收益为{refund revenue}元！";
          break;
        case 50:
          that.dataForm.noticeContext =
            "亲爱的{name}会员，有人悄悄给您的笔记：【{notes}】点赞了哦！";
          break;
      }
    },
    // 表单提交
    dataFormSubmit() {
      var obj = {};
      obj.id = this.dataForm.id || undefined;
      obj.noticeName = this.dataForm.noticeName;
      obj.noticeType = this.dataForm.noticeType;
      obj.noticeContext = this.dataForm.noticeContext;
      obj.jumpLink = this.dataForm.jumpLink;
      obj.forbidState = this.dataForm.forbidState;
      obj.terminalPushState = this.dataForm.terminalPushState;
      obj.iconId = this.dataForm.iconId;
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/user/noticetemplate/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData(obj)
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss">
.otherContent {
  padding: 40px 60px;
}
.el-row {
  display: flex;
  align-items: center;
  height: 45px;
  font-size: 16px;
}
.noticcontent{
  .el-radio {
    color: #606266;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    outline: 0;
    margin-left: 30px;
    width: 93px;
    margin-top: 10px;
    img{
      border-radius: 4px;
      margin-right: 5px;
    }
  }
}
</style>
